<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>黑马点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">
  <link href="./css/main.css" rel="stylesheet">
  <link href="./css/info.css" rel="stylesheet">

  <style type="text/css">

  </style>

</head>

<body>
  <div id="app">
    <div class="header">
      <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
      <div class="header-title">个人主页&nbsp;&nbsp;&nbsp;</div>
    </div>
    <div class="basic">
      <div class="basic-icon">
        <img :src="user.icon || '/imgs/icons/default-icon.png'" alt="">
      </div>
      <div class="basic-info">
        <div class="name">{{user.nickName}}</div>
        <span>杭州</span>
        <div class="edit-btn" @click="toEdit">
          编辑资料
        </div>
      </div>
      <div class="logout-btn" @click="logout">
        退出登录
      </div>
    </div>
    <div class="introduce">
      <span v-if="info.introduce"></span>
      <span v-else>添加个人简介，让大家更好的认识你 <i class="el-icon-edit"></i></span>
    </div>
    <div class="content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="笔记" name="1">
          <div v-for="b in blogs" :key="b.id" class="blog-item">
            <div class="blog-img"><img :src="b.images.split(',')[0]" alt=""></div>
            <div class="blog-info">
              <div class="blog-title">{{b.title}}</div>
              <div class="blog-liked"><img src="/imgs/thumbup.png" alt=""> {{b.liked}}</div>
              <div class="blog-comments"><i class="el-icon-chat-dot-round"></i> {{b.comments}}</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评价" name="2">评价</el-tab-pane>
        <el-tab-pane label="粉丝(0)" name="3">粉丝(0)</el-tab-pane>
        <el-tab-pane label="关注(0)" name="4">关注(0)</el-tab-pane>
      </el-tabs>
    </div>
    <foot-bar :active-btn="4"></foot-bar>
  </div>
  <script src="./js/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <!-- 引入组件库 -->
  <script src="./js/element.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/footer.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        user: "",
        activeName: "1",
        info: {},
        blogs: []
      },
      created() {
        this.queryUser();
      },
      methods: {
        queryBlogs() {
          axios.get("/blog/of/me")
            .then(({ data }) => this.blogs = data)
            .catch(this.$message.error)
        },
        queryUser() {
          // 查询用户信息
          axios.get("/user/me")
            .then(({ data }) => {
              // 保存用户
              this.user = data;
              // 查询用户详情
              this.queryUserInfo();
              // 查询用户笔记
              this.queryBlogs();
            })
            .catch(err => {
              location.href = "login.html"
            })
        },
        goBack() {
          history.back();
        },
        queryUserInfo() {
          axios.get("/user/info/" + this.user.id)
            .then(({ data }) => {
              if (!data) {
                return
              }
              // 保存用户详情
              this.info = data;
              // 保存到本地
              sessionStorage.setItem("userInfo", JSON.stringify(data))
            })
            .catch(err => {
              this.$message.error(err);
            })
        },
        toEdit() {
          location.href = 'info-edit.html'
        },
        logout() {
          axios.post("/user/logout")
            .then(() => {
              // 清理session
              sessionStorage.removeItem("token")
              // 跳转
              location.href = "/"
            })
            .catch(this.$message.error)
        },
        handleClick() {
        }
      },

    })
  </script>
</body>

</html>